import { Margin } from '@mui/icons-material';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import "./MainPage.css"

const Card = ({ icon, title, link }) => {
    let navigate = useNavigate();

  const handleClick = () => {
    navigate(link);
  };

  return (
    <div className="card" onClick={handleClick} style={{border: '1px', width: 300, height: 250, borderRadius: 20, boxShadow: "none", margin: "30px"}}>
      <img src={icon} alt={title} style={{height: 150, padding: 10}} />
      <h2 style={{fontSize: 20}}>{title}</h2>
    </div>
  );
};

const HomePage = () => {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', height: "100vh"}}>
      <div className="card-container" style={{ display: 'flex', justifyContent: 'space-between', height: 300}}>
        <Card icon={`${process.env.REACT_APP_BASE_URL}/fish.png`} title="Популяция рыбы" link="/population"/>
        <Card icon={`${process.env.REACT_APP_BASE_URL}/fish-food.png`} title="Кормление" link="/feed" />
        <Card icon={`${process.env.REACT_APP_BASE_URL}/maintenance.png`} title="Оборудование" link="/equipment" />
        <Card icon={`${process.env.REACT_APP_BASE_URL}/coditions.png`} title="Состояние водной среды" link="/water" />
      </div>
    </div>
  );
};

export default HomePage;